<template>
  <div>
    <div class="QCsearch">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="二维码名称">
          <el-input
            v-model="formInline.user"
            placeholder="请输入二维码名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="二维码状态">
          <el-select v-model="formInline.region" placeholder="请输入二维码状态">
            <el-option label="启动" value="start"></el-option>
            <el-option label="禁用" value="down"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-card>
      <i class="el-icon-tickets"> 操作</i>
      <div class="div1">
        <el-button>添加</el-button>
      </div>
    </el-card>
    <br />
    <div class="QRlist">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column fixed prop="id" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="二维码名称" width="300">
        </el-table-column>
        <el-table-column prop="addr" label="二维码地址" width="500">
        </el-table-column>
        <el-table-column prop="state" label="状态" width="250">
          <el-switch
            style="display: block"
            v-model="tableData.state"
            active-color="#ff4949"
            inactive-color="#13ce66"
            active-text="禁用"
            inactive-text="启用"
          ></el-switch>
        </el-table-column>
        <el-table-column prop="date" label="过期时间" sortable width="350">
        </el-table-column>
        <el-table-column label="操作" width="190">
          <template slot-scope="scope">
            <el-button @click="handleClick()" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small">导出二维码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableCopyTableList.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 1,
      tableData: [
        {
          id:1,
          name:"xxxxxxxx",
          addr:"xxxxxxxx",
          state:true
        }
      ],
      tableCopyTableList: [], // 表格copy数据b
      formInline: {
        user: "",
        region: "",
      },
      created() {
        this.selectList();
      },
      methods: {
        onSubmit() {
          console.log("点击事件成功");
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
      },
    };
  },
};
</script>

<style>
.QCsearch {
  margin: 30px;
}
.demo-form-inline {
  text-align: center;
}
.div1 {
  position: relative;
  float: right;
  bottom: 10px;
}
</style>